<template>
    <div class="config-dialog">
	<el-dialog title="课时配置" v-model="visible" :close-on-click-modal="false" :width="800" custom-class="notpt" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="150px" label-position="right" style="margin-top: 15px;min-height: 300px;">
			<el-row>
                <el-col :span="24">
					<el-form-item label="30分钟课价格" prop="price_thirty">
                        <el-input v-model="form.price_thirty" placeholder="请输入价格" clearable>
                            <template #append>¥</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="60分钟课价格" prop="price_sixty">
                        <el-input v-model="form.price_sixty" placeholder="请输入价格" clearable>
                            <template #append>¥</template>
                        </el-input>
                    </el-form-item>
					
                </el-col>
		    </el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
    </div>
</template>

<script>

import { in_array } from '@/utils/index.js'
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				in_array,
				mode: "add",
				visible: false,
				isSaveing: false,
				form: this.getDefaultRuleForm(),
				//验证规则
				rules: {
					price_thirty: [
						{required: true, message: '请输入课程价格'},
						{pattern: /^0\.([0-9]|\d[0-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/, message: "只能输入大于等于0且最多两位小数", trigger: "blur" }
					],
					price_sixty: [
						{required: true, message: '请输入课程价格'},
						{pattern: /^0\.([0-9]|\d[0-9])$|^[0-9]\d{0,8}\.\d{0,2}$|^[0-9]\d{0,8}$/, message: "只能输入大于等于0且最多两位小数", trigger: "blur" }
					]
				},
			}
		},
		mounted() {
		},
		methods: {
      ost(){
        console.log(123)
      },
			//显示
			open(){
				this.visible = true;
				return this
			},
			//表单提交方法
			submit() {
				this.$refs.dialogForm.validate(async (valid, fields) => {

					let arr = []
					for (let i in this.form) {
						arr.push({ key: i, value: this.form[i] })
					}

					try {
						this.isSaveing = true;
						await this.$API.system.config.put({ config: arr }).then(res => {
							this.isSaveing = false;
							if(res.error === 0){
								this.visible = false;
								this.$notify.success("保存成功");
							}
						})
					} catch (error) {
						this.isSaveing = false;
					}
				})
			},
			//表单注入数据
			setData(data) {
				for (let key in data) {
					if (typeof (this.form[key]) != 'undefined') {
						this.form[key] = data[key]
					}
				}
			},
			getDefaultRuleForm() {
				return {
					price_thirty: 0,
					price_sixty: 0,
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.el-form{
	height: 120px;
}
.title {
    padding-bottom: 20px;
    padding-left: 0px;
}

.mb12 {
	margin-bottom: 12px;
}

.mr10 {
	margin-right: 10px;
}

.tab-pane {
    margin-top: 10px;
}

.config-dialog:deep(.el-dialog):not(.is-fullscreen) {
    min-height: 100px;
}
</style>

